<template>
  <div style="background-color: #efefef" class="bigbox">
    <div class="box">
      <van-icon name="arrow-left" class="pHeadleft" @click="onClickLeft"/>
      <van-icon name="ellipsis" class="pHeadright" @click="showShare = true"/>
      <van-cell is-link @click="showPopup" style="display: none">展示弹出层</van-cell>
      <van-popup v-model="show" class="QRcode">
        <div class="closeiocn" @click="closeQR">
          <van-icon name="cross"/>
        </div>
        <h2>二维码</h2>
        <img src="/img/QR.png" alt="">
      </van-popup>
      <van-share-sheet
          v-model="showShare"
          title="立即分享"
          :options="options"
          @select="onSelect"
      />
      <div class="bgcolortop" :style="`background-image: url(${$store.state.loginObj.avatar});`"></div>
      <div class="bgcolortopbox"></div>
<!--      <div class="bgcolortop"></div>-->
      <div class="imgbox">
        <img v-if="$store.state.loginObj.avatar == ''" style="width: 80px; height: 80px"
             src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fhbimg.huabanimg.com%2F94e3dd6d94e50367940678319958b7d091461d7cf69-dQTIhW_fw658&refer=http%3A%2F%2Fhbimg.huabanimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1668131201&t=a37a6805622e2a57899e17081e106432"
             alt="">
        <img :src="$store.state.loginObj.avatar" alt="" v-else>
      </div>
      <div class="bgcolorbottom">
        <p class="name">{{ $store.state.loginObj.userName }}</p>
        <P class="autograph">{{ $store.state.loginObj.remark }}</P>
        <p class="labels"><span>0 关注</span><span>0 粉丝</span></p>
        <router-link class="changedata1" to="/personupdate">查看个人信息</router-link>
      </div>
      <div class="tabs">
        <div class="tabshead">动态</div>
        <div class="tabsbody">
          <van-empty description="暂无动态" style="background-color: white; margin: 5px 0px; border-radius: 5px"/>
        </div>
      </div>
    </div>
  </div>
</template>

<script>

import {getUserInfo} from "@/http/api";
import {Toast} from 'vant';

export default {
  name: "Personal",
  data() {
    return {
      active: 0,
      // 右上角三个点
      showShare: false,
      show: false,
      options: [
        {name: '复制链接', icon: 'link'},
        {name: '二维码', icon: 'qrcode'},
      ],
    };
  },
  components: {},
  methods: {

    closeQR() {
      this.show = false;
    },
    showPopup() {
      this.show = true;
    },

    //修改个人信息
    // 右上角三个点
    onSelect(option) {
      // Toast(option.name);
      this.showShare = false;
      //复制链接
      if (option.name == '复制链接') {
        var input=document.createElement("input");
        input.value='http://118.190.150.49:13201/';
        document.body.appendChild(input);
        input.select();// 选择对象
        document.execCommand("Copy");// 执行浏览器复制命令
        document.body.removeChild(input);
        this.$toast({
          message: '成功复制链接',
        });
      }
      //二维码
      if (option.name == '二维码') {
        this.showPopup()
      }
    },

    //返回上一级
    onClickLeft() {
      this.$router.go(-1)
    },
    // vant
    onOversize(file) {
      console.log(file);
      Toast('文件大小不能超过 500kb');
    },
  },
  created() {
    getUserInfo().then(res => {
      console.log(res)
    })
  }
}
</script>

<style scoped lang="less">
@themecolor: #3792D2;
P {
  margin: 0;
}

.QRcode {
  padding: 30px;
  text-align: center;
  font-size: 16px;
  //position: relative;
  > .closeiocn {
    position: absolute;
    right: 5px;
    top: 5px;
    padding: 10px;
  }

  > img {
    width: 260px;
    height: 260px;
  }
}

.box {
  background-color: #efefef;
  width: 100%;
  margin: auto;

  > .pHeadleft {
    position: absolute;
    left: 0;
    top: 10px;
    color: #FFFFFF;
    font-size: 30px;
    text-align: center;
    line-height: 40px;
    width: 45px;
    height: 40px;
    z-index: 5;
  }

  > .pHeadright {
    color: #FFFFFF;
    font-size: 30px;
    text-align: center;
    line-height: 40px;
    position: absolute;
    right: 0;
    top: 10px;
    width: 45px;
    height: 40px;
    z-index: 5;
  }

  > .bgcolortop {
    width: 100%;
    height: 122px;
    line-height: 20px;
    background-repeat: no-repeat;
    background-position: 50%;
    background-size: cover;
    filter: blur(20px);
    //background-color: #3E3E3E;
    text-align: center;
    z-index: 1;
  }
  > .bgcolortopbox {
    position: absolute;
    top: 0;
    width: 100%;
    height: 122px;
    background-color: #3E3E3E;
    z-index: 3;
    opacity: 0.3;
  }

  > .imgbox {
    //border: 2px solid gainsboro;
    border-radius: 50%;
    overflow: hidden;
    position: absolute;
    left: 5%;
    top: 82px;
    width: 80px;
    height: 80px;
    z-index: 5;

    > img {
      width: 80px;
      height: 80px;
    }
  }

  > .bgcolorbottom {
    position: relative;
    width: 100%;
    height: 150px;
    line-height: 20px;
    background-color: #FFFFFF;
    text-align: center;
    border-radius: 0 0 10px 10px;

    > .name {
      position: absolute;
      left: 5%;
      top: 50px;
      width: 146px;
      height: 26px;
      line-height: 26px;
      font-size: 18px;
      text-align: left;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }

    > .autograph {
      position: absolute;
      left: 5%;
      top: 80px;
      width: 200px;
      height: 26px;
      line-height: 26px;
      font-size: 12px;
      text-align: left;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }

    > .labels {
      position: absolute;
      left: 5%;
      top: 110px;
      font-size: 14px;
      text-align: center;

      > span {
        margin-right: 15px;
      }
    }

    > .changedata {
      position: absolute;
      right: 10px;
      top: 15px;
      color: @themecolor;
      font-size: 14px;
      text-align: center;
    }

    > .changedata1 {
      box-sizing: border-box;
      position: absolute;
      right: 5%;
      top: 15px;
      border-radius: 4px;
      line-height: 26px;
      color: @themecolor;
      font-size: 14px;
      text-align: center;
      border: 1px solid @themecolor;
      padding: 5px 10px;
    }

    .van-button--primary {
      color: @themecolor;
      background-color: white;
      border: 1px solid @themecolor;
    }

    .van-button {
      height: 35px;
      line-height: 35px;
    }

    .van-button--normal {
      padding: 0 10px;
    }
  }

  //动态
  > .tabs {
    top: 280px;
    width: 100%;
    padding: 5px 0;

    .tabshead {
      width: 100%;
      background-color: white;
      height: 35px;
      line-height: 35px;
      padding-left: 5%;
      border-radius: 10px;
    }

    .tabsbody {
      margin: 5px 0 0 0;
      width: 100%;

      > .tabsbodyY {
        width: 100%;

        > div {
          box-sizing: border-box;
          background-color: white;
          border-radius: 10px;
          margin: 5px 0;

          > header {
            box-sizing: border-box;
            padding-top: 10px;
            display: flex;

            > .left {
              width: 20%;
              height: 40px;
              text-align: center;
              line-height: 40px;

              > img {
                width: 30px;
                height: 30px;
                border-radius: 50%;
              }
            }

            > .middle {
              width: 64%;

              > .namex {
                font-size: 16px;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
              }

              > .times {
                font-size: 12px;
                color: #afafaf;
              }
            }

            > .right {
              width: 15%;
              text-align: center;
              height: 40px;
              line-height: 40px;
            }
          }

          > section {
            box-sizing: border-box;
            padding: 10px 20px;

            > p {
              box-sizing: border-box;
              padding: 5px;
              font-size: 14px;
              /* 多行省略号 */
              /*设置在第几行显示省略号 */
              -webkit-line-clamp: 3;
              /*设置当前为弹性伸缩盒子 */
              display: -webkit-box;
              /*设置弹性伸缩盒子的文本排列方式 */
              -webkit-box-orient: vertical;
              overflow: hidden;
            }

            > .contents {
              width: 100%;
              height: 50px;
              background-color: #f6f6f6;
              display: flex;

              > img {
                width: 50px;
                height: 50px;
                border-radius: 5px;
              }

              > p {
                box-sizing: border-box;
                padding: 5px;
                -webkit-line-clamp: 2;
                /*设置当前为弹性伸缩盒子 */
                display: -webkit-box;
                /*设置弹性伸缩盒子的文本排列方式 */
                -webkit-box-orient: vertical;
                overflow: hidden;
              }
            }
          }

          > footer {
            box-sizing: border-box;
            padding: 0 0 10px 0;
            width: 100%;

            span {
              display: inline-block;
              width: 50%;
              text-align: center;
            }
          }
        }
      }
    }
  }
}
</style>